<template>
  <div class="account-container" id="img-export">
    <el-button type="primary" @click="exportImage">img导出</el-button>
    <el-card>
      <h1>img图片的导出</h1>
      <div style="line-height: 30px">vue3-admin 是一套企业级后台管理系统，基于 Spring Boot 、Vue 3.0 相关技术栈开发，供各位开发者们体验和学习，一定给你最好的学习体验。</div>
      <!-- <img style="width: 70%; display: block; margin: 0 auto" src="https://s.yezgea02.com/1616331765416/WechatIMG40038.png" alt="" /> -->

      <!-- <img style="width: 70%; display: block; margin: 0 auto" src="https://s.yezgea02.com/1616938239101/419241616938196_.pic.jpg" /> -->
      <img
        style="width: 70%; display: block; margin: 0 auto"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11758956657%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628236825&t=921e6a520a2969abeddac8280bdb17c6"
      />
    </el-card>
  </div>
</template>

<script>
  import { reactive, onMounted, toRefs } from "vue";
  import ExportUtil from "@/utils/exportUtil";
  export default {
    name: "ImgExport",
    setup() {
      const state = reactive({});
      const exportImage = () => {
        ExportUtil.exportImage(document.getElementById("img-export"));
      };
      return {
        ...toRefs(state),
        exportImage,
      };
    },
  };
</script>

<style scoped>
  #img-export {
    background-color: #fff;
  }
</style>
